<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartMenu 使用示例</title>
    
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <!-- 引入SmartMenu样式 -->
    <link rel="stylesheet" href="sm.css"/>
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            margin: 0 0 10px 0;
            font-size: 28px;
        }
        
        .header p {
            margin: 0;
            opacity: 0.9;
        }
        
        .demo-section {
            padding: 30px;
        }
        
        .config-section {
            margin-top: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        
        .config-section h3 {
            margin-top: 0;
            color: #495057;
        }
        
        .config-controls {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }
        
        .config-controls label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }
        
        .config-controls input, .config-controls select {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        
        .btn {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .btn:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>SmartMenu 智能菜单示例</h1>
            <p>交互式多级菜单演示，支持自定义配置</p>
        </div>
        
        <div class="demo-section">
            <h2>六级嵌套菜单示例</h2>
            <p>这是一个完整的六级嵌套菜单结构，从一级到六级逐步细化，展示SmartMenu的无限级嵌套能力：</p>
            
            <nav class="sm-nav demo-nav">
                <ul>
                    <li><a href="#home">🏠 首页</a></li>
                    <li>
                        <a href="#products">📦 产品中心</a>
                        <ul>
                            <li><a href="#optimization">⚡ 性能优化</a></li>
                            <li>
                                <a href="#phones">📱 智能手机</a>
                                <ul>
                                    <li><a href="#iphone14pro">📱 iPhone 14 Pro</a></li>
                                    <li><a href="#iphone14max">📱 iPhone 14 Plus</a></li>
                                    <li><a href="#iphone15pro">📱 iPhone 15 Pro</a></li>
                                    <li><a href="#iphone15max">📱 iPhone 15 Pro Max</a></li>
                                    <li><a href="#s24">📱 Galaxy S24</a></li>
                                    <li><a href="#fold5">📱 Galaxy Z Fold5</a></li>
                                    <li><a href="#xiaomi14">📱 小米14</a></li>
                                    <li><a href="#mixfold">📱 MIX Fold 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#laptops">💻 笔记本电脑</a>
                                <ul>
                                    <li>
                                        <a href="#gaming">🎮 游戏本</a>
                                        <ul>
                                            <li>
                                                <a href="#alienware">👽 Alienware系列</a>
                                                <ul>
                                                    <li><a href="#m16">💻 M16 R2</a></li>
                                                    <li><a href="#x16">💻 X16 R2</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#rog">🐉 ROG系列</a>
                                                <ul>
                                                    <li><a href="#g16">💻 G16</a></li>
                                                    <li><a href="#m16">💻 M16</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#business">💼 商务本</a>
                                        <ul>
                                            <li>
                                                <a href="#thinkpad">💻 ThinkPad系列</a>
                                                <ul>
                                                    <li><a href="#x1">💻 X1 Carbon</a></li>
                                                    <li><a href="#t14">💻 T14</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#macbook">🍎 MacBook系列</a>
                                                <ul>
                                                    <li><a href="#mbpro">💻 MacBook Pro</a></li>
                                                    <li><a href="#mbair">💻 MacBook Air</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#clothing">👕 服装配饰</a>
                                <ul>
                                    <li>
                                        <a href="#men">👨 男装</a>
                                        <ul>
                                            <li>
                                                <a href="#tops">👔 上装</a>
                                                <ul>
                                                    <li>
                                                        <a href="#shirts">👔 衬衫</a>
                                                        <ul>
                                                            <li><a href="#casual">👔 休闲衬衫</a></li>
                                                            <li><a href="#formal">👔 正装衬衫</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#tshirts">👕 T恤</a>
                                                        <ul>
                                                            <li><a href="#print">🎨 印花T恤</a></li>
                                                            <li><a href="#plain">⚪ 纯色T恤</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#bottoms">👖 下装</a>
                                                <ul>
                                                    <li>
                                                        <a href="#jeans">👖 牛仔裤</a>
                                                        <ul>
                                                            <li><a href="#slim">👖 修身款</a></li>
                                                            <li><a href="#straight">👖 直筒款</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#pants">👖 休闲裤</a>
                                                        <ul>
                                                            <li><a href="#chinos">👖 卡其裤</a></li>
                                                            <li><a href="#joggers">👖 运动裤</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#women">👩 女装</a>
                                        <ul>
                                            <li>
                                                <a href="#dresses">👗 连衣裙</a>
                                                <ul>
                                                    <li>
                                                        <a href="#maxi">👗 长裙</a>
                                                        <ul>
                                                            <li><a href="#floral">👗 碎花长裙</a></li>
                                                            <li><a href="#solid">👗 纯色长裙</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#mini">👗 短裙</a>
                                                        <ul>
                                                            <li><a href="#pleated">👗 百褶短裙</a></li>
                                                            <li><a href="#bodycon">👗 紧身短裙</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#accessories">💍 配饰</a>
                                                <ul>
                                                    <li>
                                                        <a href="#jewelry">💍 首饰</a>
                                                        <ul>
                                                            <li><a href="#necklaces">📿 项链</a></li>
                                                            <li><a href="#earrings">💎 耳环</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#bags">👜 包包</a>
                                                        <ul>
                                                            <li><a href="#handbags">👜 手提包</a></li>
                                                            <li><a href="#backpacks">🎒 双肩包</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#services">🛠️ 服务支持</a>
                        <ul>
                            <li>
                                <a href="#support">🎧 客户支持</a>
                                <ul>
                                    <li>
                                        <a href="#online">💬 在线支持</a>
                                        <ul>
                                            <li>
                                                <a href="#chat">💬 在线聊天</a>
                                                <ul>
                                                    <li>
                                                        <a href="#technical">🔧 技术支持</a>
                                                        <ul>
                                                            <li><a href="#software">💻 软件问题</a></li>
                                                            <li><a href="#hardware">🔧 硬件问题</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#sales">💰 销售咨询</a>
                                                        <ul>
                                                            <li><a href="#products">📦 产品咨询</a></li>
                                                            <li><a href="#pricing">💰 价格咨询</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#email">📧 邮件支持</a>
                                                <ul>
                                                    <li>
                                                        <a href="#general">📧 一般咨询</a>
                                                        <ul>
                                                            <li><a href="#info">ℹ️ 信息咨询</a></li>
                                                            <li><a href="#feedback">💭 意见反馈</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#phone">📞 电话支持</a>
                                        <ul>
                                            <li>
                                                <a href="#hotline">📞 客服热线</a>
                                                <ul>
                                                    <li><a href="#domestic">📞 国内热线</a></li>
                                                    <li><a href="#international">📞 国际热线</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#warranty">🛡️ 保修服务</a>
                                <ul>
                                    <li>
                                        <a href="#standard">📋 标准保修</a>
                                        <ul>
                                            <li>
                                                <a href="#duration">⏰ 保修期限</a>
                                                <ul>
                                                    <li><a href="#1year">📅 1年保修</a></li>
                                                    <li><a href="#2years">📅 2年保修</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#coverage">🛡️ 保修范围</a>
                                                <ul>
                                                    <li><a href="#parts">🔧 配件保修</a></li>
                                                    <li><a href="#labor">👷 人工服务</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#extended">📋 延长保修</a>
                                        <ul>
                                            <li>
                                                <a href="#premium">⭐ 高级保修</a>
                                                <ul>
                                                    <li><a href="#3years">📅 3年保修</a></li>
                                                    <li><a href="#5years">📅 5年保修</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#training">📚 培训教程</a>
                                <ul>
                                    <li>
                                        <a href="#beginner">🌱 初级教程</a>
                                        <ul>
                                            <li>
                                                <a href="#basics">📖 基础操作</a>
                                                <ul>
                                                    <li><a href="#startup">🚀 入门指南</a></li>
                                                    <li><a href="#settings">⚙️ 设置配置</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#features">🎯 功能介绍</a>
                                                <ul>
                                                    <li><a href="#basic">🎯 基础功能</a></li>
                                                    <li><a href="#advanced">🎯 高级功能</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#advanced">🎓 高级教程</a>
                                        <ul>
                                            <li>
                                                <a href="#expert">🎓 专家级教程</a>
                                                <ul>
                                                    <li><a href="#optimization">⚡ 性能优化</a></li>
                                                    <li><a href="#customization">🎨 个性化定制</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#about">ℹ️ 关于我们</a>
                        <ul>
                            <li><a href="#optimization">⚡ 性能优化</a></li>
                            <li><a href="#customization">🎨 个性化定制</a></li>
                        </ul>
                    </li>
                    <li><a href="#contact">📞 联系我们</a></li>
                    <li>
                        <a href="#products">📦 产品中心</a>
                        <ul>
                            <li>
                                <a href="#phones">📱 智能手机</a>
                                <ul>
                                    <li><a href="#iphone14pro">📱 iPhone 14 Pro</a></li>
                                    <li><a href="#iphone14max">📱 iPhone 14 Plus</a></li>
                                    <li><a href="#iphone15pro">📱 iPhone 15 Pro</a></li>
                                    <li><a href="#iphone15max">📱 iPhone 15 Pro Max</a></li>
                                    <li><a href="#s24">📱 Galaxy S24</a></li>
                                    <li><a href="#fold5">📱 Galaxy Z Fold5</a></li>
                                    <li><a href="#xiaomi14">📱 小米14</a></li>
                                    <li><a href="#mixfold">📱 MIX Fold 3</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#laptops">💻 笔记本电脑</a>
                                <ul>
                                    <li>
                                        <a href="#gaming">🎮 游戏本</a>
                                        <ul>
                                            <li>
                                                <a href="#alienware">👽 Alienware系列</a>
                                                <ul>
                                                    <li><a href="#m16">💻 M16 R2</a></li>
                                                    <li><a href="#x16">💻 X16 R2</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#rog">🐉 ROG系列</a>
                                                <ul>
                                                    <li><a href="#g16">💻 G16</a></li>
                                                    <li><a href="#m16">💻 M16</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#business">💼 商务本</a>
                                        <ul>
                                            <li>
                                                <a href="#thinkpad">💻 ThinkPad系列</a>
                                                <ul>
                                                    <li><a href="#x1">💻 X1 Carbon</a></li>
                                                    <li><a href="#t14">💻 T14</a></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#macbook">🍎 MacBook系列</a>
                                                <ul>
                                                    <li><a href="#mbpro">💻 MacBook Pro</a></li>
                                                    <li><a href="#mbair">💻 MacBook Air</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#clothing">👕 服装配饰</a>
                                <ul>
                                    <li>
                                        <a href="#men">👨 男装</a>
                                        <ul>
                                            <li>
                                                <a href="#tops">👔 上装</a>
                                                <ul>
                                                    <li>
                                                        <a href="#shirts">👔 衬衫</a>
                                                        <ul>
                                                            <li><a href="#casual">👔 休闲衬衫</a></li>
                                                            <li><a href="#formal">👔 正装衬衫</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#tshirts">👕 T恤</a>
                                                        <ul>
                                                            <li><a href="#print">🎨 印花T恤</a></li>
                                                            <li><a href="#plain">⚪ 纯色T恤</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#bottoms">👖 下装</a>
                                                <ul>
                                                    <li>
                                                        <a href="#jeans">👖 牛仔裤</a>
                                                        <ul>
                                                            <li><a href="#slim">👖 修身款</a></li>
                                                            <li><a href="#straight">👖 直筒款</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#pants">👖 休闲裤</a>
                                                        <ul>
                                                            <li><a href="#chinos">👖 卡其裤</a></li>
                                                            <li><a href="#joggers">👖 运动裤</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#women">👩 女装</a>
                                        <ul>
                                            <li>
                                                <a href="#dresses">👗 连衣裙</a>
                                                <ul>
                                                    <li>
                                                        <a href="#maxi">👗 长裙</a>
                                                        <ul>
                                                            <li><a href="#floral">👗 碎花长裙</a></li>
                                                            <li><a href="#solid">👗 纯色长裙</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#mini">👗 短裙</a>
                                                        <ul>
                                                            <li><a href="#pleated">👗 百褶短裙</a></li>
                                                            <li><a href="#bodycon">👗 紧身短裙</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="#accessories">💍 配饰</a>
                                                <ul>
                                                    <li>
                                                        <a href="#jewelry">💍 首饰</a>
                                                        <ul>
                                                            <li><a href="#necklaces">📿 项链</a></li>
                                                            <li><a href="#earrings">💎 耳环</a></li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#bags">👜 包包</a>
                                                        <ul>
                                                            <li><a href="#handbags">👜 手提包</a></li>
                                                            <li><a href="#backpacks">🎒 双肩包</a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
            
            <div class="config-section">
                <h3>配置选项</h3>
                <div class="config-controls">
                    <label>
                        动画速度:
                        <input type="range" id="animationSpeed" min="100" max="500" value="200" step="50">
                        <span id="speedValue">200ms</span>
                    </label>
                    
                    <label>
                        悬停延迟:
                        <input type="range" id="hoverDelay" min="0" max="500" value="200" step="50">
                        <span id="delayValue">200ms</span>
                    </label>
                    
                    <label>
                        三级菜单宽度:
                        <input type="range" id="thirdLevelWidth" min="400" max="800" value="576" step="50">
                        <span id="widthValue">576px</span>
                    </label>
                </div>
                <br/>
                <div class="config-controls">
                    <button class="btn" onclick="reinitializeMenu()">重新初始化</button>
                    <button class="btn" onclick="resetConfig()">重置配置</button>
                    <button class="btn" onclick="destroyMenu()">销毁插件</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入SmartMenu插件 -->
    <script src="sm.js"></script>
    
    <script>
        let currentConfig = {
            animationSpeed: 200,
            hoverDelay: 200,
            thirdLevelWidth: '576px'
        };

        // 初始化菜单
        function initializeMenu() {
            $('.demo-nav').smartMenu(currentConfig);
            console.log('菜单已初始化，配置:', currentConfig);
        }

        // 重新初始化菜单
        function reinitializeMenu() {
            $('.demo-nav').smartMenu('destroy'); // 销毁旧实例
            initializeMenu();
        }

        // 重置为默认配置
        function resetConfig() {
            currentConfig = {
                animationSpeed: 200,
                hoverDelay: 200,
                thirdLevelWidth: '576px'
            };
            
            document.getElementById('animationSpeed').value = 200;
            document.getElementById('hoverDelay').value = 200;
            document.getElementById('thirdLevelWidth').value = 576;
            
            updateDisplayValues();
            reinitializeMenu();
        }

        // 销毁插件
        function destroyMenu() {
            $('.demo-nav').smartMenu('destroy');
            alert('插件已销毁！');
        }

        // 更新显示值
        function updateDisplayValues() {
            document.getElementById('speedValue').textContent = currentConfig.animationSpeed + 'ms';
            document.getElementById('delayValue').textContent = currentConfig.hoverDelay + 'ms';
            document.getElementById('widthValue').textContent = document.getElementById('thirdLevelWidth').value + 'px';
        }

        // 事件监听
        document.getElementById('animationSpeed').addEventListener('input', function(e) {
            currentConfig.animationSpeed = parseInt(e.target.value);
            updateDisplayValues();
        });

        document.getElementById('hoverDelay').addEventListener('input', function(e) {
            currentConfig.hoverDelay = parseInt(e.target.value);
            updateDisplayValues();
        });

        document.getElementById('thirdLevelWidth').addEventListener('input', function(e) {
            currentConfig.thirdLevelWidth = e.target.value + 'px';
            updateDisplayValues();
        });

        // 页面加载完成后初始化
        $(document).ready(function() {
            initializeMenu();
            updateDisplayValues();
            
            // 添加版本信息显示
            console.log('SmartMenu 示例页面已加载');
        });
    </script>
</body>
</html>